
Product
Introducing Scala and Kotlin Support in Socket
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
@fluentui/react-jsx-runtime
Advanced tools
React JSX runtime for Fluent UI React
Fluent UI React requires the usage of a custom JSX runtime to support the slots API
[!NOTE] This custom JSX pragma should only be used in cases where you are trying to use the internal Fluent UI React slot API in conjunction with
assertSlots()
.If you are not using the internal slot API, don't use it.
In case you want to re-compose a component and redeclare its render method then this API will be necessary, learn more on Rendering a component with slots
To properly render a component with slots, our custom createElement
method needs to be used instead of default React.createElement
:
NOTE: It works with both
automatic
orclassic
jsxRuntime configuration.
infers
@jsxRuntime automatic
/** @jsxImportSource @fluentui/react-jsx-runtime */
import { assertSlots } from '@fluentui/react-utilities';
const renderButton_unstable = (state: ButtonState) => {
const { iconOnly, iconPosition } = state;
assertSlots<ButtonSlots>(state);
return (
<state.root>
{iconPosition !== 'after' && state.icon && <state.icon />}
{!iconOnly && state.root.children}
{iconPosition === 'after' && state.icon && <state.icon />}
</state.root>
);
};
infers
@jsxRuntime classic
/** @jsx createElement */
// in order to apply our custom `createElement` factory to jsx transforms, to support slot creation, we need to import it physically
import { createElement } from '@fluentui/react-jsx-runtime';
import { assertSlots } from '@fluentui/react-utilities';
const renderButton_unstable = (state: ButtonState) => {
const { iconOnly, iconPosition } = state;
assertSlots<ButtonSlots>(state);
return (
<state.root>
{iconPosition !== 'after' && state.icon && <state.icon />}
{!iconOnly && state.root.children}
{iconPosition === 'after' && state.icon && <state.icon />}
</state.root>
);
};
FAQs
Custom JSX runtime for @fluentui/react-components
The npm package @fluentui/react-jsx-runtime receives a total of 171,874 weekly downloads. As such, @fluentui/react-jsx-runtime popularity was classified as popular.
We found that @fluentui/react-jsx-runtime demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.